<template>
    <div class="header" ref="headerRef">
        <div class="mask"></div>
        <div class="left --m-p20 --m-pos-r --m-z1">
            <div class="user m-flex --m-ai-center" :title="data.name">
                <div class="logo --m-mr20">
                    <img v-lazy="getImageUrl(data.avatar)" :alt="`${data.name}图片`">
                </div>
                <div class="name">
                    <span>{{ data.username }}</span>
                </div>
            </div>
        </div>
        <div class="center --m-pos-r --m-z1">
            <div class="nav">
                <router-link class="m-link" v-for="(item, index) in useHeaderStore().routes" :to="item.path" :key="index">
                    {{ item.meta.title }}
                </router-link>
            </div>
        </div>
        <div class="right m-flex --m-ai-center --m-p20 --m-pos-r --m-z1">
            <Login></Login>
        </div>
    </div>
</template>

<script setup lang="ts">
import Login from './Login.vue';
import { useHeaderStore } from '@/store/components/header'
import { getImageUrl } from '@/utils/core';
import { useUserStore } from '@/store';
import { computed, ref } from 'vue';
import { useHeaderFixed } from '@/hooks/useHeaderFixed';

const data = computed(() => useUserStore());
const headerRef = ref<HTMLElement>();
useHeaderFixed(headerRef)

</script>
<style></style>